<template>
  <div class="content-container" style="position: relative;">

    <div class="panel">
      <div style="height: 10px"></div>
      <div style="width: 700px;margin: auto;position: relative;">
        <el-select   v-model="selectedZskValue" placeholder="请选择"  style="width: 150px">
          <el-option v-for="item in zskOptions" :key="item.value" :value="item.value" :label="item.text"></el-option>
        </el-select>
        <el-input style="width: 400px" placeholder="请输入问题" clearable v-model="askMessage">
          <el-button slot="append" v-loading="loadAns" @click="sendMessage(askMessage)" >
            发送
          </el-button>

        </el-input>
        <img @click="toRecordAudio" src="@/assets/mike.png" style="width: 36px;height: 36px;position: absolute;top:2px;margin-left: 10px">
      </div>
      <div class="chat-panel" style="overflow-y: auto" ref="scrollDiv">

        <div class="advice-panel">
          <div style="font-weight: bolder;">常见问题:</div>
          <div  @click="sendMessage(item)" v-for="(item,index) in exampleAsk" :key="index" class="ask-example">
            {{item}}
          </div>
        </div>
        <div class="single-chat" v-for="(item,index) in list" :key="index">
          <template v-if="item.role=='user'">
            <div class="ask-box">
              <div style="width:100px"></div>
              <div class="left-panel">
                <div class="name">我</div>
                <div class="message">
               <span>
                 {{item.message}}
               </span>
                </div>
              </div>
              <div class="avt">
                <img src="@/assets/avatar-user.png" />
              </div>
            </div>
          </template>
          <template v-if="item.role=='bot'">
            <div class="ans-box">
              <div class="avt">
                <img src="@/assets/icon-robot.png" />
              </div>
              <div class="right-panel">
                <div class="name">政务助手小智</div>
                <div class="message"><span v-html="mdToHtml(item.message)"></span></div>
              </div>
              <div style="width:100px"></div>
            </div>
          </template>

        </div>
      </div>
    </div>
    <div v-show="showRecordAudioWin" style="border-radius: 10px; position: absolute;top: 80px;text-align: center;width: 200px;background-color: rgb(6 55 111 / 85%);left: 50%; transform: translateX(-50%); /* 向左移动自身宽度的一半 */">
      <img src="@/assets/speak.gif" style="width: 200px"/>
      <div style="padding-bottom: 5px">
        <el-button @click="finishRecordAudio">完成</el-button>
      </div>
    </div>
  </div>
</template>
<script>


import ReturnBtn from "@/views/components/ReturnBtn.vue";
import {qaApi} from "@/api";
import {marked} from 'marked'

export default {
  name:"qa-robot",
  components:{
    ReturnBtn
  },
  data(){
    return {
      zskOptions:[],
      selectedZskValue:"",
      showRecordAudioWin:false,
      loadAns:false,
      exampleAsk:["福州如何申领失业金？","如何在福州找工作？"],
      askMessage:"",
      list:[{message:"您好，我是政务服务助手小智,有什么可以帮到您?",role:"bot"}]
    }
  },
  mounted() {
    window.onStopRecord = this.onStopRecord
    this.initWorkspace()

  },
  methods:{
    mdToHtml(text){
      return marked(text, { sanitize: true });
    },
    initWorkspace(){
      qaApi.rasaWorkspaceList({}).then(res => {
        if (res.success) {
          let workspaces=res.data.workspaces
          if(workspaces.length>0){
            this.selectedZskValue=workspaces[0].slug
          }
          workspaces.forEach(item=>{
            this.zskOptions.push({text:item.name,value:item.slug})
          })

        }
      })
    },
    handleScrollBottom() {
      this.$nextTick(() => {
        let scrollElem = this.$refs.scrollDiv;
        scrollElem.scrollTo({ top: scrollElem .scrollHeight, behavior: 'smooth' });
      });
    },
    sendMessage(content) {
      if(this.loadAns){
        return
      }
      if(!content){
        return
      }
      this.loadAns=true
      this.list.push({
        role: "user",
        message: content
      })
      this.handleScrollBottom()
      qaApi.sendMessage({message:content,slug:this.selectedZskValue}).then((res)=>{
        this.list.push({
          role: "bot",
          message: res.data.text
        })
        this.handleScrollBottom()


      }).finally(()=>{
        this.loadAns=false
      })
    },
    toRecordAudio(){
      window.android.startRecording()
      this.showRecordAudioWin=true
    },

    finishRecordAudio(){
      window.android.stopRecording()
      this.showRecordAudioWin=false

    },
    onStopRecord(result){
      let message=""
      let results= JSON.parse(result).results;
      results.forEach((item)=>{
        if(item[0].text){
          message+=item[0].text
        }
      })
      if(message){
        this.sendMessage(message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.panel{
  width: 60%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  .chat-panel{
    padding-bottom: 10px;
    .advice-panel{
      padding-left: 10px;
      border-radius: 4px;
      background-color: white;
      margin-left: 30px;
      text-align: left;
      margin-top: 20px;
      font-size: large;
      width: 40%;
      .ask-example{
        margin-left: 30px;
        color: black;
        padding: 10px;
        border-radius: 10px;
        cursor: pointer;
      }
    }
    margin-top: 10px;
    border-radius: 16px;
    background-color:rgba(0,0,255,0.2);
    height: calc(100vh - 150px);
    .single-chat{
      .ask-box{
        margin-top: 4px;
        display: flex;
        width: 100%;
        min-height: 100px;
        .avt{
          width: 90px;
          margin-right: 10px;
          img{
            margin-top: 4px;
            width: 80px;
            height: 80px;
          }
        }
        .left-panel{
          flex:1;
          .name{
            color: white;
            text-align: right;
          }
          .message{
            text-align: right;
            margin-top: 20px;
            margin-right: 10px;
            font-size: 20px;
            color: black;
            span{
              background-color: white;
              padding: 10px;
              border-radius: 4px;

            }

          }

        }

      }
      .ans-box{
        margin-top: 10px;
        display: flex;
        width: 100%;
        min-height: 100px;
        .avt{
          width: 90px;
          margin-left: 10px;
          img{
            margin-top: 4px;
            width: 80px;
            height: 80px;
          }
        }
        .right-panel{
          .name{
            color: white;

            text-align: left;
          }
          .message{
            text-align: left;
            margin-left: 10px;
            margin-top: 10px;
            font-size: 20px;
            color: black;
            span{
              background-color: white;
              padding: 10px;
              border-radius: 4px;
              display: block;

            }

          }

        }

      }
    }
  }

}
</style>
